<template>
    <div class="loginFrame">
      <h2>登录</h2>
      <span style="color: red; font-size: 13px">{{ verification }}</span>
      <div class="logintest">
        <input v-model="username" autofocus id="un" placeholder="用户名"/>
        <br />
        <input v-model="password" type="password" id="pwd" placeholder="密码"/>
      </div>

      <div id="login_control">
        <button id="btn_login" @click="loginCheck()">登录</button>
        <br />
        <!-- <a id="forget_pwd">忘记密码？</a> -->
      </div>
    </div>
</template>

<script>
import {
  setLocalStorage,
  getLocalStorage,
  removeLocalStorage,
} from "@/util/local-storage.js";
import axios from "axios";

export default {
  name: "Login",
  inject: ["routerRefresh"],
  data() {
    return {
      verification: "",
      check: false,
      username: "",
      password: "",
    };
  },
  methods: {
    loginCheck() {
      if (!this.username.match(/^.{3,20}$/g)) {
        this.verification = "用户名必须是3-20个字符";
        this.check = true;
        return;
      }
      if (!this.password.match(/^.{6,20}$/g)) {
        this.verification = "密码必须是6-20位";
        this.check = true;
        return;
      }
      let params = {
        username: this.username,
        password: this.password,
      };
      axios.post("http://localhost:8083/user/login", params).then((res) => {
        console.log("loginRes",res);
        if (res.data.errno != 0) {
          this.$message({
          duration: 1000,
          message: res.data.errmsg,
          center: true,
          type: 'error'
          });
          return;
        }
        setLocalStorage({
          Authorization: res.data.data.token,
          id:res.data.data.user.id,
          username: res.data.data.user.username,
          avatar: res.data.data.user.avatar,
          selfContent:res.data.data.user.selfContent,
        });
        this.$message({
          duration: 1000,
          message: "登录成功！",
          center: true,
          type: 'success'
        });
        this.username = "";
        this.password = "";
        this.routerRefresh();
        // this.$router.go(0);
      });
    },
  },
  created() {
    if (!!localStorage.getItem("Authorization")) {
      this.$router.replace({ name: "Myblog" });
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.loginFrame {
  width: 400px;
  height: 260px;
  min-height: 260px;
  padding: 13px;

  position: absolute;
  left: 50%;
  top: 40%;

  transform: translate(-50%, -50%);

  background-color: rgba(240, 255, 255, 0.5);

  border-radius: 10px;
  text-align: center;

  user-select: none;
}
.logintest {
  padding: 5px;
}
#forget_pwd {
  color: rgb(153, 118, 88);
  text-decoration: none;
  margin-top: 10px;
  user-select: none;
}

#login_control {
  padding: 10px 0;
}

input {
  padding: 5px 10px;
  border-radius: 30px;
  margin: 4px;
  border: 1px sandybrown solid;
  outline: none;
}

#btn_login {
  color: rgb(170, 62, 36);
  padding: 5px 60px 5px 60px;
  border-radius: 4px;
  outline: none;
  border: 1px sandybrown solid;
  user-select: none;
}

#btn_login:hover {
  background-color: rgb(212, 155, 141);
}
</style>
